<template>
  <div class="order_list">
    <van-nav-bar style="margin-bottom:0;" title="积分订单" left-arrow @click-left="goback"/>
    <van-tabs v-model="activeIndex"
              :swipe-threshold="5"
              @click="handleTabClick">
      <van-tab v-for="(tabTitle, index) in tabTitles"
               :title="tabTitle"
               :key="index">
        <van-list v-model="loading"
                  :finished="finished"
                  :immediate-check="false"
                  finished-text="没有更多了"
                  @load="getOrderList">
          <van-panel v-for="(el, i) in orderList" :key="i"
            :title="'时间：'+el.addTime"
            :status="el.status">
            <van-card  v-for="(goods, goodsI) in el.items"
              :key="goodsI"
              class="flexcenter"
              :title="goods.goodsName"
              :num="goods.number"
              :thumb="goods.imgUrl">
            </van-card>
            <div class="total">合计: {{el.point * 100 | yuan}}</div>
             <div slot="footer"
                 class="footer_btn">
              <van-button size="small"
                          v-if="el.status === '已发货'"
                          type="danger"
                          @click="confirmOrder(el.id)">确认收货</van-button>
            </div>
          </van-panel>

        </van-list>

      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { exchangeList, exchangeReceive} from '@/api/api';
import _ from 'lodash';
import { Tab, Tabs, Panel, Card, List, Tag, NavBar } from 'vant';

export default {
  name: 'order-list',

  props: {
    active: {
      type: [String, Number],
      default: 0
    }
  },
  created() {
    this.init();
  },
  data() {
    return {
      activeIndex: 0,
      // tabTitles: ['全部', '待付款', '待发货', '待收货', '待评价'],
      tabTitles: ['全部', '待发货', '已收货'],
      orderList: [],
      page: 0,
      limit: 10,
      loading: false,
      finished: false
    };
  },

  methods: {
    init() {
      this.page = 0;
      this.orderList = [];
      // alert(this.activeIndex)
      this.getOrderList();
      // console.log(this.activeIndex, 'index')
      this.activeIndex = 0
    },
    getOrderList() {
      this.page++;
      exchangeList({
        status: this.activeIndex,
        page: this.page,
        limit: this.limit
      }).then(res => {
        // console.log(res)
        this.orderList.push(...res.data.data.list);
        console.log(this.orderList)
        // this.loading = false;
        this.finished = res.data.data.page >= res.data.data.pages;
      });
    }, 
    confirmOrder(id) {
      this.$dialog
        .confirm({
          message: '请确认收到货物, 确认收货后无法撤销!'
        })
        .then(() => {
          exchangeReceive({ id: id }).then(() => {
            this.init();
            this.$toast('已确认收货');
          });
        })
        .catch(() => {});
    },
    handleTabClick() {
      this.page = 0;
      this.orderList = [];
      this.getOrderList();
    },
    goback() {
      this.$router.go(-1);
    }
  },
  components: {
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Panel.name]: Panel,
    [Card.name]: Card,
    [List.name]: List,
    [Tag.name]: Tag
  }
};
</script>

<style lang="scss" scoped>
.van-panel__header-value {
  text-align: right;
  flex: .3;
}
.order_list {
  .van-panel {
    margin-top: 20px;
  }

  .van-card {
    background-color: #fff;
  }

  .total {
    text-align: right;
    padding: 10px;
  }

  .footer_btn {
    text-align: right;
    .van-button {
      margin-left: 10px;
    }
  }
}
</style>
